<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='新闻资讯', content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯 - 扶贫助农电商平台</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .news-card {
            border-left: 4px solid #28a745;
            transition: all 0.3s;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .news-card:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }
        .category-filter {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        .category-btn {
            margin: 5px;
            border-radius: 20px;
        }
        .category-btn.active {
            background-color: #28a745;
            border-color: #28a745;
        }
        .page-header {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 60px 0;
        }
        .news-meta {
            font-size: 0.9rem;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- 页面头部 -->
        <section class="page-header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto text-center">
                        <h1 class="display-5 fw-bold mb-3">新闻资讯</h1>
                        <p class="lead">了解最新的扶贫政策、农产品文化故事和助农活动动态</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 分类筛选 -->
        <section class="py-4">
            <div class="container">
                <div class="category-filter">
                    <h5 class="mb-3"><i class="fas fa-filter"></i> 新闻分类</h5>
                    <div class="d-flex flex-wrap">
                        <a href="/news/list" class="btn btn-outline-success category-btn" 
                           th:classappend="${currentType == null ? 'active' : ''}">
                            全部新闻
                        </a>
                        <a href="/news/list?type=扶贫政策" class="btn btn-outline-success category-btn"
                           th:classappend="${currentType == '扶贫政策' ? 'active' : ''}">
                            扶贫政策
                        </a>
                        <a href="/news/list?type=农产品文化故事" class="btn btn-outline-success category-btn"
                           th:classappend="${currentType == '农产品文化故事' ? 'active' : ''}">
                            农产品文化故事
                        </a>
                        <a href="/news/list?type=助农活动新闻" class="btn btn-outline-success category-btn"
                           th:classappend="${currentType == '助农活动新闻' ? 'active' : ''}">
                            助农活动新闻
                        </a>
                        <a href="/news/list?type=脱贫成效" class="btn btn-outline-success category-btn"
                           th:classappend="${currentType == '脱贫成效' ? 'active' : ''}">
                            脱贫成效
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 新闻列表 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <!-- 如果有错误信息 -->
                    <div th:if="${error}" class="col-12">
                        <div class="alert alert-warning text-center">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span th:text="${error}">错误信息</span>
                        </div>
                    </div>

                    <!-- 如果没有新闻 -->
                    <div th:if="${#lists.isEmpty(newsList) and !error}" class="col-12 text-center py-5">
                        <i class="fas fa-newspaper fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">暂无相关新闻</h4>
                        <p class="text-muted mb-4">请稍后再来查看，或者浏览其他分类的新闻</p>
                        <a href="/news/list" class="btn btn-success">查看全部新闻</a>
                    </div>

                    <!-- 新闻列表 -->
                    <div th:each="news : ${newsList}" class="col-md-6 mb-4">
                        <div class="card news-card h-100">
                            <div class="row g-0">
                                <div class="col-md-4" th:if="${news.imageUrl}">
                                    <img th:src="@{${news.imageUrl}}" th:alt="${news.title}" 
                                         class="img-fluid rounded-start h-100" style="object-fit: cover;">
                                </div>
                                <div th:class="${news.imageUrl != null and news.imageUrl != '' ? 'col-md-8' : 'col-md-12'}">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <span class="badge bg-success" th:text="${news.type}">新闻类型</span>
                                            <span class="badge bg-info" th:text="${news.status}">状态</span>
                                        </div>
                                        
                                        <h5 class="card-title" th:text="${news.title}">新闻标题</h5>
                                        
                                        <p class="card-text" th:text="${#strings.abbreviate(news.content, 120)}">
                                            新闻内容摘要...
                                        </p>
                                        
                                        <div class="news-meta d-flex justify-content-between align-items-center">
                                            <div>
                                                <i class="fas fa-user"></i> <span th:text="${news.author}">作者</span>
                                                <i class="fas fa-calendar ms-3"></i> 
                                                <span th:text="${#temporals.format(news.createTime, 'yyyy-MM-dd')}">2024-01-01</span>
                                            </div>
                                            <div>
                                                <i class="fas fa-eye"></i> <span th:text="${news.viewCount}">0</span>
                                            </div>
                                        </div>
                                        
                                        <div class="mt-3">
                                            <a th:href="@{/news/detail/{id}(id=${news.id})}" 
                                               class="btn btn-success btn-sm">
                                                <i class="fas fa-eye"></i> 阅读全文
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 